<template>
  <el-dialog
    :title="$t('viewaward.view')"
    :width="width"
    :visible.sync="isVisible"
    class="user-view"
  >
    <!-- 用户头像   -->
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24">
        <div class="img-wrapper">
          <img :src="avatar" alt="">
        </div>
      </el-col>
    </el-row>
    <!-- 成果名称  -->
    <el-row>
      <el-col :span="24">
        <div class="view-item">
          <i class="el-icon-user" /> <span>{{ $t('viewaward.awardname') +'：' }}</span> {{ row.name }}
        </div>
      </el-col>
    </el-row>
    <!-- 成果类型 -->
    <el-row>
      <el-col :span="24">
        <div class="view-item">
          <i class="el-icon-suitcase" /> <span>{{ $t('viewaward.awardtype') +'：' }}</span> {{ row.type }}
        </div>
      </el-col>
    </el-row>
    <!--是否正向 审核状态-->
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-star-off" /> <span>{{ $t('viewaward.ifPositive') +'：' }}</span> {{ row.ifPositive }}
        </div>
      </el-col>
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-star-off" /> <span>{{ $t('viewaward.auditState') +'：' }}</span> {{ row.auditState }}
        </div>
      </el-col>
    </el-row>
    <div v-if="row.awardInformations">
      <div v-for="i in row.awardInformations.length" :key="i">
        <el-row :gutter="10">
          <el-col v-if="row.enumValue[2*(i-1)]" :xs="24" :sm="12">
            <div v-if="row.enumValue[2*(i-1)] !== '证明材料（附件）'" class="view-item">
              <i class="el-icon-watermelon" /> <span> {{ row.enumValue[2*(i-1)] + ': ' }} </span> {{ (row.enumValue[2*(i-1)]==='获得称号时间') ? row.date: row.awardInformations[2*(i-1)].aiValue }}
            </div>
            <div v-if="row.enumValue[2*(i-1)] === '证明材料（附件）'" class="view-item">
              <i class="el-icon-picture" /> <span> {{ row.enumValue[2*(i-1)] + ': ' + '&nbsp;' }} <a style="color: #5388cd" @click="imgPreview">点击预览</a></span>
            </div>
          </el-col>
          <el-col v-if="row.enumValue[2*(i-1)+1]" :xs="24" :sm="12">
            <div v-if="row.enumValue[2*(i-1)+1] !== '证明材料（附件）'" class="view-item">
              <i class="el-icon-cherry" /> <span> {{ row.enumValue[2*(i-1)+1] + ' : ' }} </span> {{ (row.enumValue[2*(i-1)+1]==='获得称号时间') ? row.date : row.awardInformations[2*(i-1)+1].aiValue }}
            </div>
            <div v-if="row.enumValue[2*(i-1)+1] === '证明材料（附件）'" class="view-item">
              <i class="el-icon-picture" /> <span> {{ row.enumValue[2*(i-1)+1] + ':' + '&nbsp;' }}<a style="color: #5388cd" @click="imgPreview">点击预览</a></span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog :visible.sync="filedialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-dialog>
</template>
<script>
export default {
  name: 'UserView',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 原有内容
      screenWidth: 0,
      width: this.initWidth(),
      user: {},
      // 新加内容
      row: {},
      // 图片预览
      dialogImageUrl: '',
      filedialogVisible: false
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.close()
      }
    },
    avatar() {
      if (this.user.avatar) {
        return require(`@/assets/avatar/${this.user.avatar}`)
      } else {
        return require('@/assets/avatar/default.jpg')
      }
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.width = this.initWidth()
      })()
    }
  },
  methods: {
    // 【新加内容】
    // 获取某行数据
    setacIndex(row) {
      this.row = { ...row }
      console.log('触发setacIndex函数')
      console.log(this.row)
    },
    // 图片预览
    imgPreview() {
      // this.dialogImageUrl = this.row.awardInformations[this.row.inputType.indexOf(3)].aiValue
      this.dialogImageUrl = this.row.awardInformations[this.row.enumValue.indexOf('证明材料（附件）')].aiValue
      this.filedialogVisible = true
    },
    // 原有内容
    transSex(sex) {
      switch (sex) {
        case '0':
          return this.$t('common.sex.male')
        case '1':
          return this.$t('common.sex.female')
        default:
          return this.$t('common.sex.secret')
      }
    },
    initWidth() {
      this.screenWidth = document.body.clientWidth
      if (this.screenWidth < 550) {
        return '95%'
      } else if (this.screenWidth < 990) {
        return '580px'
      } else if (this.screenWidth < 1400) {
        return '600px'
      } else {
        return '650px'
      }
    },
    setUser(val) {
      this.user = { ...val }
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
.user-view {
  .img-wrapper {
    text-align: left;
    margin-top: -1.5rem;
    margin-bottom: 10px;

    img {
      width: 4rem;
      border-radius: 50%;
    }
  }

  .view-item {
    margin: 7px;

    i {
      font-size: .97rem;
    }

    span {
      margin-left: 5px;
    }
  }
  .view-update {
    display: none;
    color: blue;
  }
}
</style>
